﻿/// <reference path="../GeneratedArtifacts/viewModel.js" />


// Boolean switch taken from:
// http://blogs.msdn.com/b/lightswitch/archive/2012/12/19/enhancing-lightswitch-controls-with-jquery-mobile-michael-zlatkovsky.aspx
myapp.At13TrainsessionAttendance.StakeholderChecked_render = function (element, contentItem) {
    // Write code here.
    createBooleanSwitch(element, contentItem, '✓', '✘', '5em');
};

function createBooleanSwitch(element, contentItem, trueText, falseText, optionalWidth) {
    var $selectElement = $('<select data-role="slider"></select>').appendTo($(element));
    $('<option value="false">' + falseText + '</option>').appendTo($selectElement);
    $('<option value="true">' + trueText + '</option>').appendTo($selectElement);

    // Now, after jQueryMobile has had a chance to process the 
    //     new DOM addition, perform our own post-processing:
    setTimeout(function () {
        var $flipSwitch = $('select', $(element));

        // Set the initial value (using helper function below):
        setFlipSwitchValue(contentItem.value);

        // If the content item changes (perhaps due to another control being
        //     bound to the same content item, or if a change occurs programmatically), 
        //     update the visual representation of the control:
        contentItem.dataBind('value', setFlipSwitchValue);

        // Conversely, whenver the user adjusts the flip-switch visually,
        //     update the underlying content item:
        $flipSwitch.change(function () {
            contentItem.value = ($flipSwitch.val() === 'true');
        });

        // To set the width of the slider to something different than the default,
        //    need to adjust the *generated* div that gets created right next to
        //    the original select element.  DOM Explorer (F12 tools) is a big help here.
        if (optionalWidth != null) {
            $('.ui-slider-switch', $(element)).css('width', optionalWidth);
        }

        //===============================================================//

        // Helper function to set the value of the flip-switch
        //     (used both during initialization, and for data-binding)
        function setFlipSwitchValue(value) {
            $flipSwitch.val((value) ? 'true' : 'false');

            // Having updated the DOM value, refresh the visual representation as well
            //  (required for a slider control, as per jQueryMobile's documentation)
            $flipSwitch.slider(); // Initializes the slider
            $flipSwitch.slider('refresh');

            // Because the flip switch has no concept of a "null" value
            //    (or anything other than true/false), ensure that the 
            //    contentItem's value is in sync with the visual representation
            contentItem.value = ($flipSwitch.val() === 'true');
        }
    }, 0);
}


myapp.At13TrainsessionAttendance.TeilnahmeStatus_postRender = function (element, contentItem) {
    contentItem.addChangeListener("value", function (value) {
        if (contentItem.data.details.properties.AttendanceStatus.originalValue)
            if (contentItem.data.details.properties.AttendanceStatus.value.Id != contentItem.data.details.properties.AttendanceStatus.originalValue.Id) {
                contentItem.data.details.properties.Checked.value = true;
            }
            else {
                contentItem.data.details.properties.Checked.value = contentItem.data.details.properties.Checked.originalValue;
            }
    });
};